<template>
  <div style="margin-right: 10px">
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}品类访客转化分析
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <!-- <LineChart /> -->
      <div style="margin: 5px 5px; height: 410px" ref="salesVisitor"></div>

      <el-table :data="tableData" style="width: 100%" border :cell-class-name="tableCellClassName">
        <el-table-column fixed prop="dataDateUnit" label="类别" width="110">
        </el-table-column>
        <el-table-column v-for="(month, index) in months" :key="index" :prop="'salesData.' + index" :label="month"
          align="center" width="110" :formatter="numberFormat" :fixed="month === '汇总' ? 'right' : undefined">
        </el-table-column>
      </el-table>
    </el-card>
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-box" style="display: flex; justify-content: space-between">
            <span><i class="el-icon-collection"></i> {{ query.salesGrade ? query.salesGrade : query.proBrandList + " "
            }}{{ new Date().getFullYear() }}本年访客数{{ " " + dataYear.dataYear }}</span>
          </div>
          <PieChart :id="'salesAmount'" height="410px" :chartData="PieChartData" width="100%" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-box" style="display: flex; justify-content: space-between">
            <span><i class="el-icon-collection"></i> {{ query.salesGrade ? query.salesGrade : query.proBrandList + " "
            }}{{ new Date().getFullYear() - 1 }}上一年访客数{{ " " + dataYear.lastdataYear }}</span>
          </div>
          <PieChart :id="'salesQuantity'" height="410px" :chartData="salesQuantityPieChartData" />
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}品类访客对比分析
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24">
          <barLine :echartDataSku="barLineChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          <el-table :data="barLineData" style="width: 100%" border :height="300">
            <el-table-column prop="category1" label="类别"></el-table-column>
            <el-table-column prop="visitors" :formatter="numberFormat">
              <template #header>
                <span style="white-space: normal;">
                  本年访客数<br />{{ dataYear.dataYear }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="yoyVisitors" :formatter="numberFormat">
              <template #header>
                <span style="white-space: normal;">
                  上一年访客数<br />{{ dataYear.lastdataYear }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="visitorsYoy" label="同比" :formatter="PerseFormat"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import PieChart from "./components/PieChart";
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCategoryVisitorTend,
  selectCategoryVisitorYoy,
  dataRange,
  lastDataRange
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";
import {
  selectFirstLevelSaleRatio,
  selectFirstLevelSaleTrend,
} from "@/api/sale/BiMonitoringMiddleDwd";
export default {
  props: {
    query: {
      type: Object,
      default: () => { },
    },
    dataYear: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    barLine,
    LineChart,
    PieChart,
  },
  data() {

    return {

      //饼图
      PieChartData: {
        // order: {
        xData: [],
        female: [],
      },
      //饼图
      salesQuantityPieChartData: {
        // order: {
        xData: [],
        female: [],
      },
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
      //对比
      barLineChart: {},
      barLineData: [],
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectCategoryVisitorTend("salesVisitor");
        this.getselectCategoryVisitorYoy();

        // this.getselectFirstLevelSaleRatio();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {

    tableCellClassName({ column, columnIndex }) {
      // return "font-weight: bold;";
      if (column.label === "汇总") {
        return "highlight-row";
      } else {
        return "";
      }
    },
    //饼图
    // getselectFirstLevelSaleRatio() {
    //   selectFirstLevelSaleRatio({ salesGrade: "嘉应", dateType: "year" }).then(
    //     (response) => {
    //       if (response) {

    //       }
    //     }
    //   );
    // },
    getselectCategoryVisitorYoy() {
      selectCategoryVisitorYoy(this.query).then((response) => {
        this.barLineData = response;
        this.barLineChart = {
          columns: ["品类", "本年访客数", "上一年访客数", , "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.category1,
            本年访客数: item.visitors,
            上一年访客数: item.yoyVisitors,
            同比: item.visitorsYoy ? item.visitorsYoy : 0,
          });
        });

        //饼图
        let row = [];
        response.forEach((item) => {
          row.push({
            value: item.visitors,
            name: item.category1,
          });
        });

        this.PieChartData.xData = response.map((item) => item.category1);
        this.PieChartData.female = row;

        let list = [];
        response.forEach((item) => {
          list.push({
            value: item.yoyVisitors,
            name: item.category1,
          });
        });

        this.salesQuantityPieChartData.xData = response.map(
          (item) => item.category1
        );
        this.salesQuantityPieChartData.female = list;
      });
    },
    getselectCategoryVisitorTend(property) {
      selectCategoryVisitorTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });

        // 转换数据格式
        response.categorySaleTendData.forEach((item) => {
          const row = { dataDateUnit: item.dataDateUnit, salesData: [] };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0); // 使用逻辑或操作符确保没有数据的月份显示为0
          });
          this.tableData.push(row);
        });

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
            axisLabel: {
              rotate: 25, // 倾斜45度
              interval: 0, // 尝试显示所有标签，但实际效果可能因图表大小和标签长度而异
              // 可以通过 formatter 函数自定义标签内容，但在此例中我们直接倾斜
            },
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const E = echarts.init(this.$refs[property]);

        E.setOption(option);
      });
    },
  },
};
</script>
<style lang="scss" >
/* 添加你想要的特定行的CSS样式 */
.highlight-row {
  position: sticky;
  bottom: 0;
  font-weight: bold;
}
</style>